<template>
  <div class="faceroot" v-loading="loading">
    <h2 style="margin-bottom: 30px" v-if="!xianshi">{{ formData.name }}</h2>
    <el-form ref="formData" :model="formData">
      <TypeControl
        ref="formTypeControlHeader"
        v-if="form?.publicPanel?.components && formData"
        :arrData="form?.publicPanel?.components"
        :formData="formData"
        :selectList="selectList"
        :preview="preview"
      />
      <!-- <el-tabs  v-model="activeName" > -->
      <!-- <div style="width: 100%;
  height: 2px;
  background-color: #f1f1f1;"></div> -->
      <div
        v-for="(i, index) in form?.extendPanelGroup?.panels"
        :key="i.id"
        :label="i.name"
        :name="i.name"
      >
        <el-tabs  type="card">
          <el-tab-pane :label="i.name" ></el-tab-pane>
        </el-tabs>
        <TypeControl
          :ref="'formTypeControlTab' + index"
          v-if="i?.components && formData"
          :arrData="i?.components"
          :formData="formData"
          :selectList="selectList"
          :preview="preview"
        />
        <!-- <div style="width: 100%;
  height: 2px;
  background-color: #f1f1f1;"></div> -->
      </div>
      <!-- </el-tabs> -->
    </el-form>
  </div>
</template>

<script>
import TypeControl from './TypeControl.vue'
// import { getFacerootApi, getViewDataApi } from '@/api/Ledger'
export default {
  props: {
    formData: {
      type: Object,
      default: () => {}
    },
    selectList: {
      type: Object,
      default: () => {}
    },
    form: {
      type: Object,
      default: () => {}
    },
    loading: {
      type: Boolean,
      default: true
    },
    xianshi: {
      type: Boolean,
      default: false
    }
  },
  components: { TypeControl },
  data () {
    return {
      model: '',
      activeName: '',
      preview: true
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    handleGetAllData () {
      let data = { ...this.formData }
      console.log('handleGetAllData', data)
      const headerData = this.$refs.formTypeControlHeader.getFormData()
      data = { ...data, ...headerData }
      console.log('data1', data)
      for (let i = 0; i < this.form?.extendPanelGroup?.panels.length; i++) {
        data = {
          ...data,
          ...this.$refs['formTypeControlTab' + i][0].getFormData()
        }
      }
      console.log('data2', data)
      return data
    },
    valid () {
      return this.$refs.formData.validate((valid) => {
        if (valid) {
          return true
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.faceroot {
  width: 100%;
  height: 100%;
}

::v-deep .el-form-item__label {
  text-align: left;
}
::v-deep .el-tabs__item {
  font-size: 18px;
}
::v-deep .el-tabs__active-bar {
  height: 3px;
}
</style>
